import React, {useState,useEffect, useRef} from "react";
import { Form, Input, InputNumber, Button, Switch, TreeSelect, Upload, Image, message } from "antd";
import { Cate } from "../../types";
import { UploadOutlined } from '@ant-design/icons'
import { useNavigate } from "react-router-dom";
import { updateCate, fetchCateDetail } from '@a/cate'
interface Props {
  cates: Cate[],
  cateId: number
}
export default function CateAdd(props: Props) {
  const formRef = useRef(null);
  const navigate = useNavigate();
  const onFinish = (params: any) => {
    params = {
      ...params,
      id: props.cateId,
      onoff: params.onoff ? 1: 0,
      cateIcon
    }
   
    updateCate(params).then(res => {
      if (res.data.code === 200) {
        message.success(res.data.msg, 2, () => {
          navigate(0)
        })
      }      
    })
  }
  // 图片上传 
  const [cateIcon, setCateIcon] = useState('');
  const handleUpload = (info: any) => {
    if (info.file.status === 'done') {
      if (info.file.response.code === 200) {
        setThumb(info.file.response.data.url)
      }
    }
  }

  // 获取修改商品分类详情

  const getCateDetail = () => {
    fetchCateDetail(props.cateId).then(res => {
      if (res.data.code === 200) {
        formRef.current.setFieldsValue(res.data.data)
        setCateIcon(res.data.data.cateIcon)
      }
      
    })
  }
  useEffect(() => {
    getCateDetail()
    
  }, [props.cateId])
  return (
    <Form
      name="basic"
      ref={formRef}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 20 }}
      style={{ maxWidth: 600 }}
      initialValues={{
        onoff: true
      }}
      onFinish={onFinish}
      
    >
      <Form.Item
        label="分类名"
        name="cateName"
        rules={[{ required: true, message: "分类名必填!" }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="排序"
        name="sort"
        rules={[{ required: true, message: "排序必填!" }]}
      >
        <InputNumber min={1} />
      </Form.Item>
      <Form.Item
        label="是否隐藏"
        name="onoff"
        valuePropName="checked"
      >
        <Switch/>
      </Form.Item>
      <Form.Item
        label="父级分类"
        name="pid"
      >
        <TreeSelect
          showSearch
          style={{ width: '100%' }}
          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
          placeholder="请选择父级分类"
          allowClear
          treeDefaultExpandAll
          fieldNames={{
            label: 'cateName',
            value: 'id'
          }}
          treeData={[
            {
              cateName: '顶层分类',
              id: -1
            },
            ...props.cates
          ]}
        />
      </Form.Item>
      <Form.Item
        label="图片封面"
      >
        <Upload
          action="/api/upload"
          accept=".gif, .jpg, .png"
          name="file"
          showUploadList={false}
          onChange={handleUpload}
        >
          <Button icon={<UploadOutlined />}>点击上传</Button>
        </Upload>
        <Image src={cateIcon} width={100}/>
      </Form.Item>
      <Form.Item wrapperCol={{ offset: 4, span: 20 }}>
        <Button type="primary" htmlType="submit">
          确定
        </Button>
        <Button  htmlType="reset">
          重置
        </Button>
      </Form.Item>
    </Form>
  );
}
